import React,{useEffect,useState} from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {useAddkey} from "@/hooks/vid"
interface Props {}

function Youke(props: Props) {
  const [data,setdata]=useState([])
  useEffect(() => {
    axios.get("/youkelist").then(res=>{
      setdata(useAddkey(res.data.data))
    })
  }, [])
  console.log(data);
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: 'ID',
      dataIndex: 'vid',
      key: 'vid',
    },
    {
      title: '游客id',
      dataIndex: 'visitor_id',
      key: 'visitor_id',
    },
    {
      title: '游客名称',
      dataIndex: 'visitor_name',
      key: 'visitor_name',
    },
    {
      title: '游客头像',
      dataIndex: 'address',
      key: 'address',
      render: text => <img  style={{width:50,height:50}} src="http://fangadmin.shbwyz.com/static/common/images/visitor.jpg" alt="" />,
    },
    {
      title: '在线状态',
      dataIndex: 'online_status',
      key: 'online_status',
      render:(item:any)=>{
       return <div>{item===1 ? <Tag color='blue'>在线</Tag> : <Tag color='red'>离线</Tag>}</div>  
      }
    },
    {
      title: 'Ip',
      dataIndex: "visitor_ip",
      key: "visitor_ip",
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
  ];
  
  
  const {} = props

  return (
    <div><Table columns={columns} dataSource={data} /></div>
  )
}

const mapStateToProps = () => ({
  
})



export default connect(mapStateToProps)(Youke)
